<style>
.toolBar {
  margin-bottom: 10px;
}

.ivu-dropdown {
  margin: 0px;
}

.tCheck {
  padding-left: 10px;
  float: left;
  clear: left;
  z-index: 9999;
}
</style>

<template>
<Row :loading="spinShow">
  <Row class="toolBar" justify="space-between">
    <Col span="8">
    <Button-group>
      <Tooltip v-if="add" content="添加" placement="bottom-start">
        <Button type="ghost" @click="addClick()">
            添加
          </Button>
      </Tooltip>
      <Tooltip v-if="editCheck" content="编辑所选" placement="bottom-start" transfer>
        <Button type="ghost" @click="editCheckClick()">
            编辑所选
          </Button>
      </Tooltip>
      <Tooltip v-if="delCheck" content="删除所选" placement="bottom-start">
        <Button type="ghost" @click="delCheckClick()">
            删除所选
          </Button>
      </Tooltip>
      <Tooltip v-if="assign" content="分配资源" placement="bottom-start">
        <Button type="ghost" @click="assignClick()">
            分配资源
          </Button>
      </Tooltip>
      <Tooltip v-if="reset" content="重置密码" placement="bottom-start">
        <Button type="ghost" @click="resetClick()">
           重置密码
          </Button>
      </Tooltip>
    </Button-group>
    </Col>
    <Col span="16">
    <Tooltip content="查询" placement="bottom-start" style="float: right;">
      <Button type="ghost" @click="search">
          查询
        </Button>
    </Tooltip>
    <Input v-model="searchKey" ref="searchtxt" icon="ios-search-strong" placeholder="请输入..." @on-enter="search" style="width:200px;float:right;">
    </Input>

    <Button-group style="float: right;">
      <Tooltip content="刷新" placement="bottom-start">
        <Button type="ghost" @click="refresh">
           刷新
          </Button>
      </Tooltip>
      <Tooltip content="导出全部数据" placement="bottom-start">
        <Button type="ghost" @click="exportData(1)">
            导出全部数据
          </Button>
      </Tooltip>
      <Tooltip content="导出当前页数据" placement="bottom-start">
        <Button type="ghost" @click="exportData(2)">
            导出当前页数据
          </Button>
      </Tooltip>
    </Button-group>

    </Col>
  </Row>
  <Table :context="self" border stripe :columns="columns" :data="curTableData" :loading="loading" ref="table" @on-selection-change="selectRow" @on-sort-change="sortOrder" @on-row-dblclick="show">
  </Table>
  <div style="margin: 10px;overflow: hidden">
    <div style="float: right;">
      <Page :total="totals" :current="current" :pageSize="pageSize" :page-size-opts="pageSizeOpts" @on-change="changePage" @on-page-size-change="changeSize" show-elevator show-total show-sizer></Page>
    </div>
  </div>
  <Modal v-show="dataShow" title="查看数据详细信息" v-model="showData" class="editm">
    <Form ref="showForm" :model="showItem" :label-width="80">
      <Form-item v-for="(val, key)  in showItem" :label="key" :key="key">
        <Input :value="val" disabled :icon="key==='Logo'? val:''"></Input>
      </Form-item>
    </Form>
  </Modal>

</Row>
</template>

<script>
import api from '@/api'
import {
  inputString
} from '@/common/utils'
export default {
    data () {
        return {
            self: this,
            current: 1,
            pageSize: 10,
            total: this.totals,
            searchKey: '',
            sortby: [],
            order: [],
            spinShow: false,
            showData: false,
            showItem: {},
            pageSizeOpts: [10, 20, 50, 100],
            selectRows: [] // 选择的数据
        }
    },
    props: {
        loading: false,
        dataAll: {
            type: Array,
            default () {
                return []
            }
        },
        exportcolumns: {
            type: Array,
            default () {
                return null
            }
        },
        exportfilter: {
            type: Function,
            default () {
                return null
            }
        },
        editCheck: {
            type: Boolean,
            default: false
        },
        totals: {
            type: Number
        },
        columns: {
            type: Array,
            default () {
                return []
            }
        },
        dataShow: {
            type: Boolean,
            default () {
                return false
            }
        },
        add: {
            type: Boolean,
            default () {
                return false
            }
        },
        delCheck: {
            type: Boolean,
            default () {
                return false
            }
        },
        assign: {
            type: Boolean,
            default () {
                return false
            }
        },
        reset: {
            type: Boolean,
            default () {
                return false
            }
        },
        check: {
            type: Boolean,
            default () {
                return false
            }
        },
        op: {
            type: Boolean,
            default () {
                return false
            }
        }
    },
    computed: {
    //        过滤数据表
    //      当前表数据
        curTableData () {
      // console.log(this.columns)
            if (!this.dataAll) {
                return []
            }
            return this.dataAll
        },
        pagedata () {
            return {
                pagesize: this.pageSize,
                page: this.current,
                searchKey: this.searchKey,
                sortby: this.sortby,
                order: this.order
            }
        }
    },
  // watch: {},
    methods: {
    //        刷新数据
        refresh () {
            this.searchKey = ''
            this.$emit('refresh')
        },
    //        选择数据
        selectRow (selection) {
            this.selectRows = selection
        },
    //      改变页码大小
        changeSize (current) {
            this.pageSize = current

            this.$emit('changePage', this.pagedata)
        },
    //      改变页码
        changePage (current) {
            this.current = current

            this.$emit('changePage', this.pagedata)
        },
    // 查询
        search () {
            this.$emit('search', this.pagedata)
        },
    // 排序
        sortOrder (data) {
            console.log(data)
            console.log(this.pagedata)
      // if (this.pagedata.sortby.indexOf(data.key) > -1) {
            this.pagedata.sortby = [data.key]
            this.pagedata.order = [data.order]
            console.log(this.pagedata)
            this.$emit('sortOrder', this.pagedata)
      // }
        },
    //      导出数据1为原始数据，2为当前数据
        exportData (type) {
            if (type === 1) {
                let all = {
                    pagesize: -1,
                    page: 1,
                    searchKey: '',
                    sortby: this.sortby,
                    order: this.order
                }
                this.$emit('search', all)
                setTimeout(() => {
                    this.$refs.table.exportCsv({
                        filename: '原始数据',
                        quoted: true
            //            columns: this.columns.filter((col, index) => index < 5),
            //            data: this.dataAll,
                    })
                    this.search()
                }, 1500)
            } else if (type === 2) {
                this.$refs.table.exportCsv({
                    filename: '排序和过滤后的数据',
                    original: false,
                    quoted: true
                })
            }
        },
    //      显示详细记录
        show (row) {
      // this.showItem = row
      // this.showData = true
        },
    //      编辑表格数据
        edit (index) {
            console.log(index)
            console.log(this.dataAll)
            this.$emit('edit', this.dataAll[index])
        },
    //      新增
        addClick () {
            this.$emit('add')
        },
    //      授权
        assignClick () {
            let list = []
            for (let i = 0; i < this.selectRows.length; i++) {
                list.push(this.selectRows[i].Id)
            }
            this.$emit('assign', list)
        },
    //      重置
        resetClick () {
            let list = []
            for (let i = 0; i < this.selectRows.length; i++) {
                list.push(this.selectRows[i].Id)
            }
            this.$emit('reset', list)
        },
        editCheckClick () {
            if (!this.selectRows || this.selectRows.length !== 1) {
                this.$Message.error('编辑数据必须选择一个数据！', 4)
            } else {
                this.$emit('edit', this.selectRows[0])
            }
        },
    //      删除所选确认
        delCheckClick () {
            if (!this.selectRows || this.selectRows.length < 1) {
                this.$Message.warning('必须选择一个需要删除的项目！')
            } else {
                this.$Modal.confirm({
                    title: '删除确认',
                    content: '<p>请确认此数据删除后，不影响其他功能或人员使用。</p>' +
            '<p>是否继续删除？</p>',
                    onOk: () => {
                        this.delList(this.selectRows)
                    },
                    onCancel: () => {}
                })
            }
        },
    //      删除所选
        delList (rows) {
            let list = []
            for (let i = 0; i < rows.length; i++) {
                list.push(rows[i].Id)
            }
            this.$emit('delCheck', list)
        },
    //      删除确认
        remove (index) {
            this.$Modal.confirm({
                title: '删除确认',
                content: '<p>请确认此数据删除后，不影响其他功能或人员使用。</p>' +
          '<p>是否继续删除？</p>',
                onOk: () => {
                    this.del(index)
                },
                onCancel: () => {}
            })
        },
    //      删除
        del (id) {
            this.$emit('del', this.curTableData[id])
        }

    },
    mounted () {
    // 修改删除操作按钮
        if (this.op) {
            let op = {
                title: '操作',
                key: 'action',
                width: 150,
                align: 'center',
                render: (h, params) => {
                    return h('div', [
                        h('Button', {
                            props: {
                                type: 'primary',
                                size: 'small'
                            },
                            style: {
                                marginRight: '5px'
                            },
                            on: {
                                click: () => {
                                    this.edit(params.index)
                                }
                            }
                        }, '修改'),
                        h('Button', {
                            props: {
                                type: 'error',
                                size: 'small'
                            },
                            on: {
                                click: () => {
                                    this.remove(params.index)
                                }
                            }
                        }, '删除')
                    ])
                }
            }
            this.columns.push(op)
        }

    // 多选框
        if (this.check) {
            let ck = {
                type: 'selection',
                width: 60,
                align: 'center'
            }
            this.columns.unshift(ck)
        }
    //      this.getall()
    }
}
</script>

